<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
<head>
	<title>View All</title>
</head>
<body>
	<div layout:fragment="content">
		<div class="container">
		  <div id="heading" class="masthead">
			<h3 class="muted">Chat Application</h3>
		  </div>
		  <div id="main-content">
			<table class="table table-striped">
			  <thead>
				<tr>
				  <th>User</th>
				  <th></th>
				</tr>
			  </thead>
			  <tbody data-bind="foreach: friends()">
				<tr>
				  <td data-bind="text: username"></td>
				  <td class="trade-buttons">
					<button class="btn btn-primary" data-bind="click: $root.conversation().chat">Chat</button>
				  </td>
				</tr>
			  </tbody>
			</table>

		  <div id="trade-dialog" class="modal hide fade" tabindex="-1">
			<div class="modal-body">
			  <div>Chat with <span data-bind="text: conversation().to().username"></span></div>
			  <div id="chat" style="height: 5em;max-height: 200px;overflow:scroll" data-bind="foreach: conversation().messages()">
				<div data-bind="text: messageFormatted"></div>
			  </div>
			  <form class="form-horizontal" data-bind="submit: conversation().send">
				<textarea data-bind="value: conversation().draft"></textarea>
				<button class="btn btn-primary" type="submit">Send</button>
			  </form>
			</div>
		</div>
			<div class="alert alert-warning">
			  <h5>Notifications</h5>
			  <ul data-bind="foreach: notifications">
				<li data-bind="text: notification"></li>
			  </ul>
			</div>
		  </div>
		</div>


	<!-- 3rd party -->
	<script th:src="@{/webjars/jquery/jquery.min.js}" src="/webjars/jquery/jquery.min.js"></script>
	<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}" src="/webjars/bootstrap/js/bootstrap.min.js"></script>
	<script th:src="@{/webjars/knockout/knockout.js}" src="/webjars/knockout/knockout.js"></script>
	<script th:src="@{/webjars/sockjs-client/sockjs.min.js}" src="/webjars/sockjs-client/sockjs.min.js"></script>
	<script th:src="@{/webjars/stomp-websocket/stomp.min.js}" src="/webjars/stomp-websocket/stomp.min.js"></script>

	<!-- application -->
	<script th:src="@{/js/message.js}" src="../static/js/message.js"></script>
	<script type="text/javascript">
	  (function() {
		var socket = new SockJS('/messages');
		var stompClient = Stomp.over(socket);

		var appModel = new ApplicationModel(stompClient);
		ko.applyBindings(appModel);

		appModel.connect();

	  })();
	</script>
	</div>
</body>
</html>
